<template>
  <div class="main">
    <center>
      <el-table
        :data="
          tableData.filter(
            data =>
              !search ||
              data.car_number.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 80%"
        border
        height="600"
      >
        <el-table-column label="序号" width="180" align="center">
          <template slot-scope="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column label="车牌号" prop="car_number"> </el-table-column>
        <el-table-column label="省份证" prop="idcard"> </el-table-column>
        <el-table-column label="姓名" prop="name"> </el-table-column>
        <el-table-column label="图片" prop="image">
          <template slot-scope="scope">
            <img
              style="width: 100px; height: 60px"
              :src="scope.row.image"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column label="原因" prop="reason">
          <template slot-scope="scope">
            <el-tag> {{ scope.row.reason }} </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="描述" prop="describe">
          <template slot-scope="scope">
            <el-tag type="success"> {{ scope.row.describe }} </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="处置人" prop="chuzhiren"> </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.totalRow"
      >
      </el-pagination>
    </center>
  </div>
</template>

<script>
import { getTaskFinish } from "@/api/task.js";
export default {
  data() {
    return {
      tableData: [],
      search: "",
      pageNumber: 1, //当前页
      pageSize: 10, //每页大小
      totalRow: 0, //总条数
      totalPage: 0, //总页数
      input: "",

      dialogFormVisible: false, //编辑弹出层默认为关闭
      form: {
        idcard: "",
        name: "",
        describe: "",
        address: "",
        reason: "",
        image: ""
      },
      formLabelWidth: "80px",

      imageUrl: []
    };
  },
  methods: {
    //分页点击方法
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      var params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      };
      this.findAll(params);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val;
      var params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      };
      this.findAll(params);
    },
    //添加表格序号
    getIndex($index) {
      return (this.pageNumber - 1) * this.pageSize + $index + 1;
    }
  },
  //初始化的时候初始化表格大小
  created() {
    var params = {
      pageNumber: this.pageNumber,
      pageSize: this.pageSize
    };
    getTaskFinish("/task/taskfinish", params).then(res => {
      if (res.code === 200) {
        this.tableData = res.data.list;
        for (var i = 0; i < res.data.list.length; i++) {
          this.imageUrl.push("localhost:8001/images/" + res.data.list[i].image);
        }
        this.totalRow = res.data.totalRow;
      } else if (res.code === 500) {
        this.$message(res.data);
      }
    });
  }
};
</script>
<style scoped>
.main {
  width: 100%;
  height: 700px;
  margin-top: 10px;
  border: 1px solid red;
}
.avatar-uploader .el-upload {
  // border: 1px dashed #d9d9d9;
  border: 1px solid red;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
